<%@ page import="java.util.List" %>
<%@ page import="com.situ.web.pojo.Teacher" %>
<%@ page import="com.situ.web.util.PageInfo" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>教师列表 · 稳态版</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"/>
    <style>
        :root{--bg:#0c0c12;--glass:rgba(255,255,255,.05);--accent:#ff3cac;}
        html,body{height:100%;margin:0;background:var(--bg);color:#fff;font-family:'Segoe UI',Arial,sans-serif;}
        body{display:flex;align-items:center;justify-content:center;}
        .table-area{
            position:relative;
            width:90vw;max-width:1200px;max-height:90vh;
            padding:1.5rem;border-radius:1.2rem;
            background:var(--glass);
            box-shadow:0 0 10px var(--accent),0 0 30px var(--accent);
        }
        #bg-canvas{
            position:absolute;top:0;left:0;z-index:-1;border-radius:1.2rem;
            pointer-events:none;
        }
        .table-dark tbody tr:hover{background:rgba(255,76,76,.15);}
        .btn-add{
            position:absolute;top:1rem;right:1.5rem;
            background:var(--accent);color:#fff;border:none;border-radius:50px;
            padding:.6rem 1.2rem;
        }
        .btn-del{background:transparent;border:1px solid var(--accent);color:var(--accent);border-radius:.4rem;transition:.3s;}
        .btn-del:hover{background:var(--accent);color:#fff;}
        .btn-edit{background:transparent;border:1px solid #0dcaf0;color:#0dcaf0;border-radius:.4rem;transition:.3s;margin-right:.25rem;}
        .btn-edit:hover{background:#0dcaf0;color:#fff;}
    </style>
</head>
<body>
<div class="table-area" id="tableBox">
    <h2 class="text-center mb-3">教师列表</h2>
    <a class="btn btn-add" href="${pageContext.request.contextPath}/teacher_add.jsp">添加</a>

    <div class="table-responsive">
        <table class="table table-dark table-hover align-middle mb-0">
            <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>薪资</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <%
                PageInfo<Teacher> pageInfo = (PageInfo) request.getAttribute("pageInfo");
                    for(Teacher t : pageInfo.getList()){
            %>
            <tr>
                <td><%=t.getId()%></td>
                <td><%=t.getName()%></td>
                <td><%=t.getAge()%></td>
                <td><%=t.getGender()%></td>
                <td><%=t.getSalary()%></td>
                <td><a onclick="del(<%=t.getId()%>)" href="javascript:void(0)">删除</a></td>
                <td><a href="/teacher?method=toUpdate&id=<%=t.getId()%>">编辑</a></td>
            </tr>


            <%
                }
            %>
            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <%
                    for (int i = 1; i <= pageInfo.getTotalPage(); i++) {
                %>
                <li><a href="/teacher?method=selectByPage&pageNo=<%=i%>"><%=i%></a></li>
                <%
                    }
                %>


                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script>
    /* ---------- 动态背景（仅表格区域） ---------- */
    const tableBox = document.getElementById('tableBox');
    const cvs = document.createElement('canvas');
    cvs.id = 'bg-canvas';
    tableBox.appendChild(cvs);
    const ctx = cvs.getContext('2d');
    let w = cvs.width = tableBox.offsetWidth;
    let h = cvs.height = tableBox.offsetHeight;
    function resize(){ w = cvs.width = tableBox.offsetWidth; h = cvs.height = tableBox.offsetHeight;}
    window.addEventListener('resize', resize);

    const particles=[],colors=['#ff3cac','#784ba0','#2b86c5'],count=20;
    class Particle{
        constructor(){
            this.x = Math.random()*w;
            this.y = Math.random()*h;
            this.r = Math.random()*1.2+0.5;
            this.dx = (Math.random()-0.5)*0.2;
            this.dy = (Math.random()-0.5)*0.2;
            this.color = colors[Math.floor(Math.random()*colors.length)];
        }
        update(){
            this.x += this.dx;
            this.y += this.dy;
            if(this.x<0||this.x>w) this.dx*=-1;
            if(this.y<0||this.y>h) this.dy*=-1;
        }
        draw(){
            ctx.beginPath();
            ctx.arc(this.x,this.y,this.r,0,Math.PI*2);
            ctx.fillStyle = this.color;
            ctx.globalAlpha = .6;
            ctx.fill();
        }
    }
    for(let i=0;i<count;i++) particles.push(new Particle());
    function drawBg(){
        ctx.clearRect(0,0,w,h);
        particles.forEach(p=>{p.update(); p.draw();});
        requestAnimationFrame(drawBg);
    }
    drawBg();

    /* ---------- 删除确认 ---------- */
    function del(id){
        if(confirm('确认删除该教师？')){
            location.href='${pageContext.request.contextPath}/teacher?method=deleteById&id='+id;
        }
    }
</script>
</body>
</html>